<template>
	<view class="record">
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" />
		<ppc-card title="饮食记录" @click="foodClick" @extraClick="foodExtra" :margin="'20rpx'" :padding="'20rpx'"
			:sub-title="foodChartData.categories[foodChartData.categories.length-1]" :icon="null" extraColor="#fff"
			BtnBg="#7cba59" :type="3" :chartData="foodChartData">
		</ppc-card>
		<ppc-card title="体重记录" @click="weightClick" @extraClick="weightExtra" :margin="'20rpx'" :padding="'20rpx'"
			:sub-title="weightChartData.categories[weightChartData.categories.length-1]" extra="记录" :isBtn="true"
			:icon="null" extraColor="#fff" BtnBg="#7cba59" :type="2" :chartData="weightChartData">
		</ppc-card>
		<uni-popup ref="popup" background-color="#fff">
			<view class="btn">
				<text @click="()=>popup.close()" class="cancel">取消</text>
				<text @click="saveWeight" class="save">确定</text>
			</view>
			<picker-view :value="weight" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in number" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in float" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in unit" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	import ppcCard from '/components/ppcCard.vue'
	const content = ref([{
			iconPath: '/static/icon/breakfast.png',
			selectedIconPath: '/static/icon/breakfast.png',
			text: '早餐',
			active: false
		},
		{
			iconPath: '/static/icon/lunch.png',
			selectedIconPath: '/static/icon/lunch.png',
			text: '午餐',
			active: false
		},
		{
			iconPath: '/static/icon/dinner.png',
			selectedIconPath: '/static/icon/dinner.png',
			text: '晚餐',
			active: false
		}
	])
	const pattern = ref({
		color: '#fff',
		backgroundColor: '#a2ba9a',
		selectedColor: '#7cba59',
		buttonColor: '#7cba59',
		iconColor: '#fff'
	})
	const initData = ref()
	const weight = ref([50, .0, '公斤'])
	const weigthValue = ref()
	const popup = ref()
	const weightShow = ref(false)
	const horizontal = ref('left')
	const vertical = ref('bottom')
	const direction = ref("horizontal")
	const unit = ref(['公斤'])
	const float = ref([])
	const number = ref([])
	const weightChartData = ref({
		categories: [],
		series: [{
			name: '体重(公斤)',
			data: []
		}],
		unit: ''
	})
	const foodChartData = ref({
		categories: [],
		series: [{
			name: '热量(大卡)',
			data: []
		}],
		unit: ''
	})
	onReady(() => {
		for (let i = 30; i <= 200; i++) {
			number.value.push(i)
		}
		for (let i = 0; i <= 9; i++) {
			float.value.push('.' + i)
		}
		getWeight()
		getFoodRecord()
	})
	onLoad(() => {
		uni.$on('update', (data) => {
			if (data.type == "weight") {
				getWeight()
			} else {
				getFoodRecord()
			}

		})
	})
	onUnload(() => {
		uni.$off('update')
	})
	// onUnmounted(() => {
	// 	uni.$off('weight')
	// })
	//获取历史体重数据
	const getWeight = () => {
		proxy.$http('getWeight').then(res => {
			if (res.result.code == 200) {
				initData.value = res.result.data.data
				let categories = []
				let data = []
				let unit = ""
				res.result.data.data.map(item => {
					unit = item.unit
					data.push(item.weight)
					categories.push(item.date.slice(item.date.indexOf('/') + 1))
				})
				weightChartData.value.categories = categories.reverse()
				weightChartData.value.series[0].data = data.reverse()
				weightChartData.value.unit = unit
			}
		})
	}
	//获取历史饮食记录数据
	const getFoodRecord = () => {
		proxy.$http('getFoodRecord').then(res => {
			if (res.result.code == 200) {
				initData.value = res.result.data.data
				let categories = []
				let data = []
				res.result.data.data.map(item => {
					data.push(item.totalCaloric)
					categories.push(item.date.slice(item.date.indexOf('/') + 1))
				})
				foodChartData.value.categories = categories.reverse()
				foodChartData.value.series[0].data = data.reverse()
				foodChartData.value.unit = "大卡"
			}
		})
	}
	const trigger = (e) => {
		switch (e.item.text) {
			case "早餐":
				uni.navigateTo({
					url: "/pages/foods/foods?title=早餐"
				})
				break;
			case "午餐":
				uni.navigateTo({
					url: "/pages/foods/foods?title=午餐"
				})
				break;
			case "晚餐":
				uni.navigateTo({
					url: "/pages/foods/foods?title=晚餐"
				})
				break;
			default:
				break;
		}
	}
	const foodClick = () => {
		if (!foodChartData.value.unit) return
		uni.navigateTo({
			url: `/pages/details/details?foodRecord=true`
		})
	}
	const weightClick = () => {
		if (!weightChartData.value.unit) return
		uni.navigateTo({
			url: `/pages/details/details?weight=true`
		})
	}
	const foodExtra = () => {
		console.log('foodExtra');
	}
	const weightExtra = () => {
		popup.value.open("bottom")
	}

	const bindChange = (e) => {
		weigthValue.value = {
			weight: Number(number.value[e.detail.value[0]] + float.value[e.detail.value[1]]),
			unit: unit.value[0]
		}
	}

	//保存体重到数据库
	const saveWeight = () => {
		const date = new Date().getFullYear() + "/" + (new Date().getMonth() + 1).toString().padStart(2, "0") + "/" +
			new Date().getDate().toString().padStart(2, "0")
		const data = Object.assign(weigthValue.value, {
			date: date
		})
		uni.showLoading({
			title: '上传数据中',
			mask: true
		})
		proxy.$http('addWeight', data).then(res => {
			if (res.result.code == 200) {
				uni.showToast({
					title: res.result.msg,
					icon: 'none',
					duration: 1000
				});
				getWeight()
				uni.hideLoading()
				popup.value.close()
			}
		})
	}
</script>

<style lang="scss">
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		// line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}

	.btn {
		height: 70rpx;
		display: flex;
		line-height: 70rpx;
		justify-content: space-between;
		box-shadow: 0 3rpx 10rpx 0rpx #d4d4d4;
		font-size: 34rpx;
		font-weight: bold;

		.save {
			margin-right: 20rpx;
			color: #87C38F;
		}

		.cancel {
			margin-left: 20rpx;
			color: #afafaf;
		}
	}
</style>